<template>
  <div>
    <a-modal
      :title="title"
      :visible="visible"
      :confirmLoading="loading"
      :isdouble="isdouble"
      :Personnel="Personnel"
      width="1000px"
      :footer="false"
      @cancel="() => $emit('cancel')"
    >
      <div>
        <a-row>
          <a-col class="expert" :md="6" :sm="6">
            <!-- <modal></modal> -->
            <a-tree
              style="height: 400px; overflow: auto"
              :selectedKeys.sync="selectedKeys"
              :replaceFields="Modifyfield"
              @select="getTableData"
              :tree-data="org"
              default-expand-all
            ></a-tree>
          </a-col>
          <a-col :md="1" :sm="1"></a-col>
          <a-col :md="17" :sm="17">
            <a-row>
              <a-col :md="24" style="margin-bottom: 12px">
                <a-input-search
                  placeholder="员工名称/电话号码/员工编号"
                  v-model="content"
                  @search="onSearch"
                ></a-input-search>
              </a-col>
            </a-row>
            <!-- <a-button v-show="isAdd" type="primary" style="margin-bottom: 10px" @click="getExternal"
              >添加外部人员</a-button
            >
            <div style="margin: 10px 0" v-show="!isAdd">
              参与人名称：
              <BaseInput
                style="width: 30%"
                v-model="outside"
                placeholder="请输入外部参与人员"
                :maxLength="maxLength"
                @change="editError"
              ></BaseInput>
              <a-button type="primary" style="margin-left: 20px" @click="getOutside">添加</a-button>
              <a-button style="margin-left: 20px" @click="cancel">取消</a-button>
            </div> -->
            <!-- <p v-show="addError" style="margin: 10px 90px; color: red">请填写正确名称！</p> -->
            <s-table
              ref="table"
              size="default"
              rowKey="id"
              :columns="columns"
              :scroll="{ y: 260 }"
              :data="loadData"
              :alert="true"
              show-size-changer
              show-quick-jumper
              showPagination="auto"
            >
              <span slot="action" slot-scope="text, record">
                <template>
                  <a @click="handleAdd(record)">添加</a>
                </template>
              </span>
            </s-table>
          </a-col>
        </a-row>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { getOrganization } from '@/api/achievementsManage'
import { getEmployeeList } from '@/api/science'
import { STable } from '@/components'
import { getCustOrgTree, getStaffAll } from '@/api/subassembly/TreeSelectOrganization'

const columns = [
  {
    title: '员工名称',
    dataIndex: 'employeeName',
    key: 'employeeName',
  },
  {
    title: '员工编号',
    dataIndex: 'employeeNo',
    key: 'employeeNo',
  },
  {
    title: '电话号码',
    dataIndex: 'phone',
    key: 'phone',
  },
  {
    title: '职称',
    dataIndex: 'title',
    key: 'title',
  },
  {
    title: '操作',
    width: '100px',
    scopedSlots: { customRender: 'action' },
  },
]
export default {
  name:'a'+ Date.now(),
  data() {
    return {
      Modifyfield: {
        children: 'children',
        title: 'label',
        key: 'id',
      },
      selectedKeys: [],
      personnelTable: [],
      ID: undefined,
      columns: columns,
      queryParam: {},
      loadData: (parameter) => {
        this.queryParam.subItemId = this.selectedKeys[0]
        this.queryParam.type = 1
        let args = Object.assign({}, parameter, this.queryParam)
        return getEmployeeList(args).then((res) => {
          return res
        })
      },
      isAdd: true,
      maxLength: 10,
      outside: undefined,
      Personnel: [],
      doublePersonnelList: [],
      content: undefined,
      addError: false,
      org: [],
    }
  },
  components: {
    STable,
  },
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    loading: {
      type: Boolean,
      default: () => false,
    },
    title: {
      type: String,
      default: () => '添加计划完成人',
    },
    isdouble: {
      type: Boolean,
      default: () => false,
    },
  },
  created() {
    getCustOrgTree({
      containTags: this.$store.getters['GET_ORGLABEL'].map(item => item.code),
       baseOrgType:0, 
      systemOrgType: 1, 
      containVirtual: 1,
    }).then((res) => {
      if (res.data && res.data.length > 0) {
        this.org = res.data
        this.ID = res.data[0].id
        // this.selectedKeys = [res.data[0].id]
      }
    })
  },
  methods: {
    handleAdd(record) {
      if (!this.$props.isdouble) {
        if (this.Personnel.length > 0) {
          this.$message.warning('只能添加一名人员！')
          return
        }
        this.Personnel.push({
          employeeName: record.employeeName,
          employeeId: record.employeeId,
        })
        this.$emit('addPersonnel', this.Personnel)
        this.$message.success('已添加')
        this.$emit('cancel')
      } else {
        if (this.Personnel.length > 0) {
          this.$message.warning('只能添加一名人员！')
          return
        }
        this.doublePersonnelList.push({
          employeeName: record.employeeName,
        })
        this.$emit('addDoublePersonnel', this.doublePersonnelList)
        this.$message.success('已添加')
        this.$emit('cancel')
      }
    },
    handleOk(e) {
      this.confirmLoading = true
      setTimeout(() => {
        this.visible = false
        this.confirmLoading = false
      }, 2000)
    },
    getTableData(selectedKeys, info) {
      // console.log(selectedKeys)
      // console.log(info)
      this.ID = info.selectedNodes[0].data.props.id
      this.onSearch()
    },
    getExternal() {
      this.isAdd = false
    },
    cancel() {
      this.isAdd = true
    },
    // getOutside() {
    //   let regexp = /^[\u4e00-\u9fa5]{1,6}(·[\u4e00-\u9fa5]{1,6}){0,2}$/ //姓名正则
    //   if (this.Personnel.length > 0) {
    //     this.$message.warning('只能添加一名人员！')
    //     return
    //   }
    //   if (!regexp.test(this.outside)) {
    //     this.addError = true
    //     return false
    //   }
    //   if (!this.$props.isdouble) {
    //     this.Personnel.push({
    //       employeeName: this.outside,
    //     })
    //     this.$emit('addPersonnel', this.Personnel)
    //     this.outside = undefined
    //   } else {
    //     this.doublePersonnelList.push({
    //       name: this.outside,
    //     })
    //     this.$emit('addDoublePersonnel', this.doublePersonnelList)
    //     this.outside = undefined
    //   }
    // },
    onSearch() {
      let regexp = /^[\u4e00-\u9fa5]{1,6}(·[\u4e00-\u9fa5]{1,6}){0,2}$/ //姓名正则
      let mPattern = /^1[34578]\d{9}$/ //手机号正则
      let posPattern = /^[A-Za-z0-9]+$/ //用户编号正则
      this.queryParam.phone = this.queryParam.employeeName = this.queryParam.employeeNo = undefined
      if (regexp.test(this.content)) {
        this.queryParam.employeeName = this.content
        this.queryParam.phone = this.queryParam.employeeNo = undefined
      }
      if (mPattern.test(this.content)) {
        this.queryParam.phone = this.content
        this.queryParam.employeeName = this.queryParam.employeeNo = undefined
      }
      if (posPattern.test(this.content) && !mPattern.test(this.content)) {
        this.queryParam.employeeNo = this.content
        this.queryParam.employeeName = this.queryParam.phone = undefined
      }
      this.$refs.table.refresh(true)
      // this.content = undefined
    },
    editError() {
      this.addError = false
    },
  },
}
</script>

<style lang='less'  scoped>
</style>
